
<div class="wmm-module">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend></legend>
</fieldset>

<div class="layui-form-item" style="padding-left:25px;">
    <button class="layui-btn layui-btn-sm  layui-btn-normal" onclick="renders.box(true)">添加实例</button>
    <button class="layui-btn layui-btn-sm  layui-btn-primary" onclick="fb.router.route({ url: '/fastboot/pages/sys/application'})">返回</button>
</div>

<div style="padding-left:20px">
    <div id="instanceTable"></div>
</div>

<template id="tmp-title">
    您正在管理平台 <span style="color:red">{{appName}}</span> 的实例
</template>


<template id="tmp-app-form">
    <div style="padding:10px">
        <form class="layui-form" lay-filter="app-form" action="javascript:;">
            <input type="hidden" value="" name="id" />
            <input type="hidden" value="" name="appId" />
            <div class="layui-form-item">

                <label class="layui-form-label">实例名称<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="instanceName" lay-verify="required|length" placeholder="请输入实例名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="app">立即提交</button>
                    <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</template>

<script>
    var appData = fb.router.state;
    new Wmm({

        imports: ["datatable", "form", "api"],

        //页面变量
        vars: {
            table: {}
        },

        methods: {
        },

        //页面事件注册
        listener: function () {
            var form = fb.form;
            form.on('submit(app)', function (data) {
                var dataObject = data.field;
                if (dataObject.id) {
                    fb.api.appInstance.update(dataObject, function () {
                        layer.closeAll();
                        layer.msg("修改成功");
                        renders.flush();
                    });
                    return;
                }
                //insert
                fb.api.appInstance.add(dataObject, function () {
                    layer.closeAll();
                    layer.msg("添加成功");
                    renders.flush();
                });
            });


            fb.form.verify({
                length: function (value) {
                    var maxLength = 16;
                    if (value.length > maxLength) {
                        return '输入字符长度不能超过' + maxLength + '位';
                    }
                },
                length128: function (value) {
                    var maxLength = 128;
                    if (value.length > maxLength) {
                        return '输入字符长度不能超过' + maxLength + '位';
                    }
                },
            });


        },

        //渲染对象
        renders: {
            flush: function () {
                vars.table.flush();
            },

            renderPageBar: function () {

            },

            render: function () {
                document.querySelector("legend").innerHTML = document.querySelector("#tmp-title").innerHTML.render(appData);

                vars.table = new DataTable({
                    el: "instanceTable",
                    url: fb.api.appInstance.url+"?appId=" + appData.id,
                    fixHeightNumber:320,
                    defines: [
                        {
                            head: "实例名称",
                            prop: "instance_name",
                        }, {
                            head: "实例信息",
                            prop: "instance_info",
                            replace:function(v){
                                return JSON.stringify(v);
                            }
                        }, {
                            head: "创建者",
                            prop: "created_username",
                        }, {
                            head: "创建时间",
                            prop: "gmt_create",
                            type: "datetime",
                        },
                    ],
                    handles: [
                        {
                            edit: function (data) {
                                renders.box(false, data);
                            }
                        },

                        {
                            del: {
                                tip: "确定要删除吗？",
                                do: function (data) {
                                    fb.api.appInstance.delete(data.id, function () {
                                        layer.closeAll();
                                        layer.msg("删除成功");
                                        renders.flush();

                                    })
                                }
                            }
                        },

                    ],
                });
            },
            //添加修改
            box: function (isCreate, data) {
                var title = "添加";
                if (!isCreate) {
                    title = "修改";
                }

                layer.open({
                    type: 1,
                    title: title + "实例",
                    content: document.querySelector("#tmp-app-form").innerHTML,
                    area: ['500px', '180px'],
                    success: function () {
                        if (!isCreate) {
                            fb.form.val('app-form', data)
                        } else {
                            fb.form.val('app-form', { appId: appData.id })
                        }
                    }
                });
            },
        },
    });

</script>